<template>
	<div class="base-content" key="ReqTool">
		<el-form :model="form">
			<el-form-item label="请求地址">
				<el-input v-model="form.url">
					<template v-slot:prepend>
						<el-select v-model="form.method" placeholder="请选择" style="min-width: 100px;">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</template>
					<template v-slot:append>
						<el-button type="primary" @click="req">
							<i class="iconfont">&#xe9cf;</i>请求
						</el-button>
					</template>
				</el-input>
			</el-form-item>
			<el-tabs v-model="curTab">
				<el-tab-pane label="header配置" name="header">
					<el-card class="box-card" shadow="hover">
						<template v-slot:header>
							<div class="clearfix card-title">
								<span>header配置</span>
								<div style="flex:1;"></div>
								<el-button style="float: right; padding: 3px 0" type="text" @click="addRow('header')">添加一行</el-button>
							</div>
						</template>
						<el-row :gutter="20" v-for="(item, index) in form.header" :key="index">
							<el-col :span="6">
								<el-form-item :label-width="0">
									<template v-slot:label>
										<i class="iconfont remove-btn" @click="removeRow('header', index)">&#xe788;</i>
									</template>
									<el-input v-model="item.key"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="18">
								<el-form-item :label-width="0">
									<el-input v-model="item.value"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="参数配置" name="params">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-card class="box-card" shadow="hover">
								<template v-slot:header>
									<div class="clearfix card-title">
										<span>路径参数</span>
										<div style="flex:1;"></div>
										<el-button style="float: right; padding: 3px 0" type="text" @click="addRow('params')">添加一行</el-button>
									</div>
								</template>
								<el-row :gutter="20" v-for="(item, index) in form.params" :key="index">
									<el-col :span="12">
										<el-form-item :label-width="0">
											<template v-slot:label>
												<i class="iconfont remove-btn" @click="removeRow('params', index)">&#xe788;</i>
											</template>
											<el-input v-model="item.key"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item :label-width="0">
											<el-input v-model="item.value"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-card>
						</el-col>
						<el-col :span="12">
							<el-card class="box-card" shadow="hover">
								<template v-slot:header>
									<div class="clearfix card-title">
										<span>body参数</span>
										<div style="flex:1;"></div>
										<el-button style="float: right; padding: 3px 0" type="text" @click="addRow('data')">添加一行</el-button>
									</div>
								</template>
								<el-row :gutter="20" v-for="(item, index) in form.data" :key="index">
									<el-col :span="12">
										<el-form-item :label-width="0">
											<template v-slot:label>
												<i class="iconfont remove-btn" @click="removeRow('data', index)">&#xe788;</i>
											</template>
											<el-input v-model="item.key"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item :label-width="0">
											<el-input v-model="item.value"></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</el-card>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="响应" name="res">
					<el-input type="textarea" :rows="6" readonly disabled v-model="form.res"></el-input>
				</el-tab-pane>
			</el-tabs>
		</el-form>
	</div>
</template>

<script setup lang="ts">
import {
	UnwrapNestedRefs,
	reactive,
	ref
} from 'vue'
import axios from 'axios'
import { Method } from 'axios'

let form: UnwrapNestedRefs<{
	method: Method,
	baseUrl: string,
	url: string,
	header: Array<{ [key: string]: string }>,
	params: Array<{ [key: string]: string }>,
	data: Array<{ [key: string]: string }>,
	res: string
}> = reactive({
	method: 'get',
	baseUrl: '',
	url: 'http://localhost:8080/GoldenControl/applet/appArticle/queryPage',
	header: [{
		key: 'Content-Type',
		value: 'application/x-www-form-urlencoded; charset=UTF-8'
	}],
	params: [],
	data: [],
	res: ''
}),
	options = [{
		label: 'get',
		value: 'get'
	}, {
		label: 'post',
		value: 'post'
	}, {
		label: 'delete',
		value: 'delete'
	}, {
		label: 'put',
		value: 'put'
	}, {
		label: 'patch',
		value: 'patch'
	}],
	curTab = ref('header')
const req = () => {
	const params: { [key: string]: string } = {}
	const data: { [key: string]: string } = {}
	const headers: { [key: string]: string } = {}
	form.params.forEach(item => {
		params[item.key] = item.value
	})
	form.data.forEach(item => {
		data[item.key] = item.value
	})
	form.header.forEach(item => {
		headers[item.key] = item.value
	})
	axios.request({
		url: form.url,
		method: form.method,
		headers,
		params,
		data
	}).then(res => {
		curTab.value = 'res'
		form.res = JSON.stringify(res)
		console.log(res)
	}).catch(err => {
		curTab.value = 'res'
		form.res = err.message
		if (err.response) {
			console.log(err.response.data);
			console.log(err.response.status);
			console.log(err.response.headers);
		} else if (err.request) {
			console.log(err.request);
		} else {
			console.log('Error', err.message);
		}
	})
},
	addRow = (type: string) => {
		if (type === 'header') {
			form.header.push({})
		} else if (type === 'params') {
			form.params.push({})
		} else if (type === 'data') {
			form.data.push({})
		}
	},
	removeRow = (type: string, idx: number) => {
		if (type === 'header') {
			form.header.splice(idx, 1)
		} else if (type === 'params') {
			form.params.splice(idx, 1)
		} else if (type === 'data') {
			form.data.splice(idx, 1)
		}
	}
</script>

<style scoped>
.box-card {
	margin-top: 20px;
}

.card-title {
	display: flex;
	align-items: center;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}

.clearfix:after {
	clear: both;
}

.remove-btn {
	font-size: 2em;
	color: #f56c6c;
	vertical-align: middle;
	display: inline-block;
	cursor: pointer;
}
</style>
